<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title>刮刮乐</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="../../../css/mui.css" rel="stylesheet"/>
	<link href="../../../css/mui.min.css" rel="stylesheet"/>
	<link href="../../../css/mui-icons-extra.css" rel="stylesheet"/>
	<link href="../../../css/app.css" rel="stylesheet"/>
	<style type="text/css">
        /* * {
			box-sizing: border-box;
		}
		body {
			background: #dfdfdf;
			text-align: center;
		} */
		.container {
			margin-top: 10%;
			text-align: center;
		}
		.container h4 {
			padding-top: 50px;
		}
		#canvas {
			margin: 10% auto;
			width: 240px; height: 240px;
			/*background: url('icon.png');*/
			background: #888888;
			background-size: 100% 100%;
		}
		#canvasBg {
			width: 240px; height: 240px;
			position: relative;
		}
		#canvasBg ul {
			margin-left: -40px;
		}
		#canvasBg li {
			padding: 10px;
			padding-top: 20px;
			width: 80px; height: 80px;
			list-style: none;
			border: 0;
			border-right: 0.1px solid #D0D0D0;
			border-bottom: 0.1px solid #D0D0D0;
			float: left;
		}
		#canvasBg span {
			font-size: 35px;
		}
		#mask {
			width: 300px; height: 240px;
			position: relative; top: -240px;
		}
	</style>
</head>
<body>
	<!-- 头部HEADER -->
	<header class="mui-bar mui-bar-nav">
		<span class="mui-icon mui-icon-back" 
			onclick="jumpToReward()"></span>
		<h1 class="mui-title">刮刮乐</h1>
		<span class="mui-icon mui-icon-list 
			app-list-right app-fs30" 
			onclick="jumpToRewardDrawList()"></span>
	</header>
	<!-- 头部HEADER -->
	
	<!-- 主体布局 -->
    <div class="container">
        <h4>刮一刮？奖励10元？</h4>
        <div id="canvas">
			<!-- 刮奖内容 -->
            <div id="canvasBg">
				<ul id="canvasBgUl"></ul>
			</div>
			<!-- 透明遮罩 -->
            <canvas id="mask"></canvas>
			<input type="hidden" id="numInput" value="0"/>
        </div>
		<!-- 按钮 -->
		<p>
			<button type="button" class="app-heart-blue"
					onclick="jumpToReward()">
				<span class="mui-icon mui-icon-back" ></span>
					返回
			</button>
			&nbsp; 
			<button type="button" class="app-heart-blue"
				onclick="jumpToRewardDraw()">
				<span class="mui-icon mui-icon-refresh"></span>
				刷新
			</button>
		</p>
    </div>
	<!-- 主体布局 -->
</body>
</html>


<script src="../../../js/mui.js"></script>
<script src="../../../js/app.js"></script>
<script src="../../../js/views/view.js"></script>
<script src="../../../js/views/draw.js"></script>
<script type="text/javascript">
</script>